<template>
  <div class="my">
    <!-- 头像 -->
    <div class="zdy-yi flex" @click="tapUser">
      <div class="zdy-head float-left">
        <img :src="user.avatar" alt="" width="100%" />
      </div>
      <div class="zdy-zt float-left">
        <h4>
          <a href="#" style="color: white">{{ user.user_name }}</a>
        </h4>
      </div>
    </div>
    <!-- 梯子1 订单-->
    <van-row type="flex" justify="space-between" class="zdy-er-yi">
      <van-col span="12">我的订单</van-col>
      <van-col span="12">
        <router-link
          :to="isLogin ? '/order/all' : '/login'"
          style="font-size: 14px; color: rgb(193, 194, 194); float: right"
        >
          全部订单>
        </router-link>
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-around" class="zdy-er-er">
      <van-col span="6" align="center">
        <router-link :to="isLogin ? '/order/waitpay' : '/login'">
          <van-icon name="balance-pay" size="30" />
          <div>待付款</div>
        </router-link>
      </van-col>
      <van-col span="6" align="center">
        <router-link :to="isLogin ? '/order/waitsend' : '/login'">
          <van-icon name="logistics" size="30" />
          <div>待发货</div>
        </router-link>
      </van-col>
      <van-col span="6" align="center">
        <router-link :to="isLogin ? '/order/waitreceive' : '/login'">
          <van-icon name="sign" size="30" />
          <div>待收货</div>
        </router-link>
      </van-col>
      <van-col span="6" align="center">
        <router-link :to="isLogin ? '/order/complete' : '/login'">
          <van-icon name="after-sale" size="30" />
          <div>退货/售后</div>
        </router-link>
      </van-col>
    </van-row>
    <!-- 梯子2 钱包-->
    <van-row type="flex" justify="space-between" class="zdy-san-yi">
      <van-col span="24">我的钱包</van-col>
    </van-row>
    <van-row type="flex" justify="space-around" class="zdy-san-er">
      <van-col span="6" align="center">
        <a href="#">
          <span>0</span>
          <div>优惠卷</div>
        </a>
      </van-col>
      <van-col span="6" align="center">
        <a href="#">
          <span>0</span>
          <div>积分</div>
        </a>
      </van-col>
      <van-col span="6" align="center">
        <a href="#">
          <span>0</span>
          <div>余额</div>
        </a>
      </van-col>
      <van-col span="6" align="center">
        <a href="#">
          <span>0</span>
          <div>我的收藏</div>
        </a>
      </van-col>
    </van-row>
    <!-- 梯子3 菜单-->
    <div class="zdy-si">
      <van-cell
        title="个人资料"
        icon="records"
        is-link
        :to="isLogin ? '/userinfo' : '/login'"
      />
      <van-cell
        title="收货地址"
        icon="location-o"
        is-link
        :to="isLogin ? '/address' : '/login'"
      />
      <van-cell
        title="联系我们"
        icon="phone-o"
        is-link
        :to="isLogin ? '/call' : '/login'"
      />
      <van-cell
        title="意见反馈"
        icon="edit"
        is-link
        :to="isLogin ? '/feedback' : '/login'"
      />
      <van-cell
        title="退出登录"
        icon="revoke"
        is-link
        @click="logout"
        v-if="isLogin"
      />
    </div>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
import { Dialog } from "vant";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  components: { Tabbar },
  data() {
    return {};
  },
  computed: {
    // 获取登录状态 isLogin  用户信息 user
    ...mapState(["isLogin", "user"]),
  },
  methods: {
    // 获取用户注销函数 userLogout
    ...mapMutations(["userLogout"]),
    // 用户头像点击事件
    tapUser() {
      // 设置跳转路由
      let url;
      // 如果用户已登录 跳转到用户信息页面
      if (this.isLogin) url = "/userinfo";
      // 如果没有登录 跳转到用户登录页面
      else url = "/login";
      // 页面跳转
      this.$router.push(url);
    },
    // 用户注销事件
    logout() {
      Dialog.confirm({
        title: "退出登录",
        message: "是否确认退出登录",
      })
        .then(() => {
          // on confirm
          // 用户注销
          this.userLogout();
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped>
.my {
  background-color: #f5f5f5;
}
.zdy-er-yi {
  margin: 15px 5px 1px 5px;
  padding: 8px;
  border-radius: 15px 15px 0 0;
  background-color: white;
}
.zdy-er-er {
  margin: 0 5px;
  padding: 8px;
  border-radius: 0 0 15px 15px;
  background-color: white;
}
.zdy-er-er a {
  color: black;
}
.zdy-san-yi {
  margin: 20px 5px 1px 5px;
  padding: 8px;
  border-radius: 15px 15px 0 0;
  background-color: white;
}
.zdy-san-er {
  margin: 0 5px;
  padding: 8px;
  border-radius: 0 0 15px 15px;
  background-color: white;
}
.zdy-san-er a {
  color: black;
}
.zdy-si {
  margin: 20px 5px 0 5px;
  padding: 8px;
  border-radius: 15px;
  background-color: white;
}
.zdy-zt {
  margin: 10px 20px 20px 10px;
  line-height: 70px;
}
.zdy-yi {
  padding-top: 30px;
  background-color: #e4004f;
  border-radius: 0 0 25% 25%;
}
.flex {
  display: flex;
}
.float-left {
  float: left;
}
.zdy-head {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  margin: 10px 20px 20px 10px;
}
.van-tabbar-item--active {
  color: #e4004f;
}
</style>
